<template>
	<view class="login">
		<view class="formInfo">
        <view class="title">
          欢迎登录植物科普APP
        </view>
		    <u-form :model="info" ref="uForm" label-position="top">
		        <u-form-item label="手机号:">
		            <u-input v-model="info.phone" />
		        </u-form-item>
		        <u-form-item label="密码:">
		            <u-input type="password" v-model="info.pwd" />
		        </u-form-item>
		    </u-form>
		</view>
        <view class="control-btn">
            <u-button class="btn btn-login" type="primary" @click="submit">登录</u-button>
            <u-button class="btn btn-register" type="default" @click="toRegister">注册</u-button>
        </view>
	</view>
</template>

<script>
	import api from '@/common/api.js';
  import {loading, clearLoad} from '@/common/global.js';
	export default {
		data() {
			return {
				info: {
					phone: '',
					pwd: ''
				}
			};
		},
        onReady() {
            // this.$refs.uForm.setRules(this.rules);
        },
		methods: {
            // 注册跳转
			toRegister() {
                uni.navigateTo({
                    url: '/pages/register/register'
                })
            },
            /**
             * 登录请求
             * */
            loginReq(cb) {
                let user = this.info;
                let params = {
                    phone: user.phone,
                    password: user.pwd
                }
                api.login(params, res => {
                    cb && cb(res.data)
                })
            },
            // 登录
            submit() {
                if(!this.info.phone || !this.info.pwd) {
                    uni.showToast({
                        icon: 'none',
                        title: '账号或密码错误',
                        duration: 1000
                    })
                    return;
                }
                loading('登录中');
                this.loginReq(res => {
                    this.$updateParams(['loginStatus', true]);
                    this.$updateParams(['personInfo', {phone: res.data.phone}])
                    this.$updateParams(['personInfo', {userName: res.data.username}])
                    this.$updateParams(['personInfo', {src: res.data.src}])
                    this.$updateParams(['personInfo', {token: res.data.token}])
                    uni.setStorage({
                        key: 'phone',
                        data: res.data.phone
                    })
                    uni.setStorage({
                        key: 'userName',
                        data: res.data.username
                    })
                    uni.setStorage({
                        key: 'src',
                        data: res.data.src
                    })
                    uni.setStorage({
                        key: 'token',
                        data: res.data.token
                    })
                    clearLoad();
                    uni.showToast({
                        icon: 'success',
                        title: res.msg + ',跳转中...',
                    })
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/my/my'
                        })
                    }, 1500)
                });
            }
		}
	}
</script>

<style lang="less" scoped>
	.login {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15rpx;
        background: #fff;
        
        .title {
            text-align: center;
            color: #000;
            font-weight: bold;
            font-size: 36rpx;
        }
        
        .control-btn {
            margin-top: 150rpx;
            .btn {
                margin-bottom: 50rpx;
            }
        }
    }
</style>
